<template>
    <view class="card">
         <view class="card_header">
         	<view class="title">
         		<up-text :lines="2" :text="props.title"></up-text>
         	</view>
			<view class="price">
				<up-text type="error" mode="price" :text="props.price" size="18px"></up-text>
				<view class="numClass">
					<up-text type="success" mode="text" text="数量:" size="12px" style="flex: 1;"></up-text>
					<up-text type="success" mode="text" :text="props.num" size="12px" style="flex:2"></up-text>
				</view>
			</view>
         </view>
		 <up-line color="#ff0000"></up-line>
		 <view v-show="props.isShowFooter" class="card_foot">
			<view class="status">
				<view style="margin-right: 4px;"><up-tag text="状态:" size="mini" ></up-tag></view>
				 <up-text mode="text" :text="computeStatus()" size="13"></up-text>
			</view>
			<view class="btn_offer">
				<up-button text="删除" icon="trash" type="primary" @click="deleInfo" style="margin-right: 10px;" ></up-button>
                <up-button :text="buttonText" icon="cut" type="primary" @click="updateInfo" ></up-button>
			</view>
		 </view>
	</view>
	<u-modal :show="show" title="确定删除吗?"  showCancelButton closeOnClickOverlay @confirm="confirmDele" @cancel="cancelDele" @close="cancelDele"></u-modal>
</template>


<script setup lang="ts">
	import type {MySellInfoProps} from '@/utils/page_types'
    import { ref } from 'vue'
    const props = defineProps<MySellInfoProps>()
    const isShowFooter  =  ref(true)
	const show = ref(false);
	const content = '确定删除吗?';
	const buttonText =  ref('');

	const computeStatus= ()=>{
		let result =''
		switch(props.status){
			case 0:
				result='未交易'
				buttonText.value='修改'
				break;
				case 1:
				result='已交易'
				buttonText.value='重新发布'
				break;
		}
		return result
	}

    const confirmDele=()=>{
        show.value=false;
		props.onDele(props.id);
	}

	const cancelDele=()=>{
		show.value=false;
	}



	const gotoUpdate = function(){
		const obj={
			...props
		}
		uni.redirectTo({
			url:"updateinfo"+"?info="+encodeURIComponent(JSON.stringify(obj)),
		})
	}

	const rePublish=function(){
		const obj={
			...props
		}
		uni.redirectTo({
			url:"updateinfo"+"?info="+encodeURIComponent(JSON.stringify(obj)),
		})
	}

    const updateInfo = ()=>{
		props.status===0?gotoUpdate():rePublish();
	}

    const deleInfo = ()=>{
		console.log("deleInfo:",props.id)
		show.value=true;
	}
</script>


<style scoped>
.card{
	  display: flex;
	  flex-direction: column;
	  width: 95%;
	  background-color: white;
	  border-radius: 6px;
	  margin: 5px auto;
	  border: 1px solid #c8c7cc;
  } 
  .card_header{
	  display: flex;
	  justify-content: space-between;
	  height: 80px;
	  align-items: center;
	  padding-left: 18px;
	  padding-right: 18px;
  }
  .title{
	  width: 70%;
	  margin-right: 8px;
  }
  .price{
	  width: 30%;
	  color: red;
	  text-align: center;
	  font-weight: bold;
	  margin-left: 10px;
  }
  .card_foot{
	  height: 60px;
	  display: flex;
	  align-items: center;
	  margin: 1px 8px;
	  justify-content: space-around;
  }
  .user_name{
	  display: flex;
  }
  .status{
	  display: flex;
  }
  .numClass{
	  margin-top: 4px;
	  display: flex;
  }
  .btn_offer{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>
